import React, { Component } from 'react'
//导入搜索导航栏组件
import { Flex, Toast} from 'antd-mobile'
import { getCurrentCity } from '../../utils/index'
import { List,AutoSizer,WindowScroller,InfiniteLoader} from 'react-virtualized'
import { API } from '../../utils/api' 
import { BASE_URL } from '../../utils/url'
import SearchHeader from '../../components/SearchHeader'
import styles from './index.module.css'
import Filter from './components/Filter'
import HouseItem from '../../components/HouseItem'
import Sticky from '../../components/Sticky'
import NoHouse from '../../components/NoHouse'
// import {getCurrentCity} from '../../utils/index'


// const curCity =await getCurrentCity()
//       this.setState({
//         curCityName: curCity.label
//       })

//获取当前定位城市信息 
// const {  label , value  } =  JSON.parse(localStorage.getItem('hkzf_city'))
export default class HouseList extends Component {
    state = {
        //列表数据
        list: [],
        //总条数
        count: 0,
        isLoading: false,        
    }

    // 初始化默认值
  label = ''
  value = ''
   //初始化实例属性
   filters = {}

    async componentDidMount(){
        const { label,value } = await getCurrentCity()
        this.label = label
        this.value = value
        this.searchHouseList()
       
    }

    async searchHouseList(){
        this.setState({
            isLoading: true
          })
        //获取当前定位城市id
        // const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
        // 开启loading
        Toast.loading('加载中...',0,null,false)
        console.log('实际拿到的数据',this.filters);
        const res = await API.get('/houses', {
            params: {
              cityId: this.value,
              ...this.filters,
              start: 1,
              end: 20
            }
          })
          const { list, count } = res.data.body
          console.log('请求到的数据',res);
        //关闭loading
        Toast.hide()

        //解决了没有房源数据时，也弹窗提示的bug
        if(count !== 0 ){
            Toast.info(`共找到${count} 套房源`,2,null,false)
        }
       
        this.setState({
            list,
            count,
            isLoading: false
        })
    }

    //接受Filter 组件中筛选条件数据
    onFilter = filters =>{
        //返回页面顶部
        window.scrollTo(0,0)
        this.filters = filters
        console.log('HouseList',filters);

        //调用获取房屋数据的方法
        this.searchHouseList()
    }

   // 渲染房屋列表项
   renderHouseList = ({ key, index, style }) => {
    // 根据索引号来获取当前这一行的房屋数据
    const { list } = this.state
    const house = list[index]

    // 判断 house 是否存在
    // 如果不存在，就渲染 loading 元素占位
    if (!house) {
      return (
        <div key={key} style={style}>
          <p className={styles.loading} />
        </div>
      )
    }

    return (
      <HouseItem
        onClick={() => this.props.history.push(`/detail/${house.houseCode}`)}
        key={key}
        // 注意：该组件中应该接收 style，然后给组件元素设置样式！！！
        style={style}
        src={BASE_URL + house.houseImg}
        title={house.title}
        desc={house.desc}
        tags={house.tags}
        price={house.price}
      />
    )
  }
//判断列表中的每一行是否加载完成
    isRowLoaded = ({ index }) => {
        return !!this.state.list[index];
    }
//用了获取更多房屋列表数据  当更多的数据被加载时，它会被调用
//该方法的返回值是一个Promise对象，并且这个对象应该在数据加载完成时，来调用 resolve 让Promise对象的状态变为已完成
    loadMoreRows = ({ startIndex, stopIndex }) => {
        // return fetch(`path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`)
        //     .then(response => {
        //         // Store response data in list...
        //     })
        // console.log(startIndex,stopIndex);
        return new Promise(resolve =>{
             API.get('/houses',{
                params:{
                    cityId: this.value,
                    ...this.filters,
                    start: startIndex,
                    end: stopIndex
                }
             }).then( res => {
                console.log(res);
                this.setState({
                    list: [...this.state.list,...res.data.body.list]
                })
             })
            //数据加载完成时，调用resolve 即可
            resolve()
        })
    }

      // 渲染列表数据
  renderList() {
    const { count, isLoading } = this.state
    // 关键点：在数据加载完成后，再进行 count 的判断
    // 解决方式：如果数据加载中，则不展示 NoHouse 组件；而，但数据加载完成后，再展示 NoHouse 组件
    if (count === 0 && !isLoading) {
      return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>
    }

    return (
      <InfiniteLoader
        isRowLoaded={this.isRowLoaded}
        loadMoreRows={this.loadMoreRows}
        rowCount={count}
      >
        {({ onRowsRendered, registerChild }) => (
          <WindowScroller>
            {({ height, isScrolling, scrollTop }) => (
              <AutoSizer>
                {({ width }) => (
                  <List
                    onRowsRendered={onRowsRendered}
                    ref={registerChild}
                    autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
                    width={width} // 视口的宽度
                    height={height} // 视口的高度
                    rowCount={count} // List列表项的行数
                    rowHeight={120} // 每一行的高度
                    rowRenderer={this.renderHouseList} // 渲染列表项中的每一行
                    isScrolling={isScrolling}
                    scrollTop={scrollTop}
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        )}
      </InfiniteLoader>
    )
  }

    render() {
        return (
            <div>
                <Flex className={styles.header}>
                    <i className='iconfont icon-back'onClick={() => this.props.history.go(-1)} ></i>
                    <SearchHeader cityName={this.label} className={styles.searchHeader} />
                </Flex>

                {/* 条件筛选栏 */}
                <Sticky height={40}>
                    <Filter onFilter={this.onFilter} />
                </Sticky>

                {/* 房屋列表 */}
                <div className={styles.houseItems}>{this.renderList()}</div>
            </div>
        )
    }
}
